<template>
  <div :id="id" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import * as echarts from 'echarts'

function getRandomNumber(m, n) {
  return Math.floor(Math.random() * (m - n + 1) + n)
}

var dataAxis = []
var data = []
var dataShadow = []

for (let index = 0; index < 20; index++) {
  data.push(getRandomNumber(60000, 72000))
}

for (var i = 0; i < data.length; i++) {
  dataAxis.push(`5/${i + 1}`)
}

let option = {
  title: {
    text: '云客服平均通话时长(单位：分钟)'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: dataAxis,
    axisTick: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
    {
      // For shadow
      type: 'bar',
      itemStyle: {
        color: 'rgba(0,0,0,0.05)'
      },
      barGap: '-100%',
      barCategoryGap: '40%',
      data: dataShadow,
      animation: false
    },
    {
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      data: data
    }
  ]
}

export default {
  data() {
    return {
      id: new Date().getTime()
    }
  },

  mounted() {
    this.drawLine()
  },

  methods: {
    drawLine() {
      if (document.getElementById(this.id) == null) {
        return
      }
      this.$echarts.dispose(document.getElementById(this.id))

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped></style>
